<template>
  <div class="search-header">
    <el-button class="search-header__title" type="text" @click="$emit('click')">
      {{title}}</el-button>
    <el-input style="float: right; width: 300px;" v-if="enableSearch" :placeholder="placeholder"
      size="small" prefix-icon="el-icon-search" v-model="searchVal"
      @keyup.enter.native="$emit('search')">
    </el-input>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    enableSearch: {
      type: Boolean,
      default: false
    },
    placeholder: String,
    value: ''
  },
  data() {
    return {
      searchVal: ''
    };
  },
  watch: {
    value(val) {
      this.searchVal = val;
    },
    searchVal(val) {
      this.$emit('input', val);
    }
  }
};
</script>

<style>

</style>
